<template>
  <div class="hello">
    <div>  省：</div>
    <select v-model="selectedProvince"  @change="updateCity">
      <option v-for="province in prov" :key="province.name" :value="province.name">{{ province.name }}</option>
    </select>
    <div>  市：</div>
    <select v-model="selectedCity" @change="updateCityAdd">
      市：
      <option v-for="city in cities" :key="city.name" :value="city.name">{{ city.name }}</option>
    </select>
    <div>  区：</div>
    <select v-model="selectedArea">
      <option v-for="area in areas" :key="area.area" :value="area.area">{{ area }}</option>
    </select>
  </div>
</template>

<script>
import City from "../city";

console.log("123", City)
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  /**
   * 调用组建
   * @type {Object}
   */
  components: {},
  /**
   * 数据字段
   * @return {[type]} [description]
   */
  data() {
    return {
      selectedProvince: "",
      prov: City,
      selectedCity: "",
      cities: [],
      selectedArea: '',
      areas: [],
    };
  },
  /**
   * 页面调用函数
   * @type {Object}
   */
  methods: {
    updateCity() {
      // 根据选择的省份更新城市列表
      var selectedProvince = this.prov.find(province => province.name === this.selectedProvince);
      if (selectedProvince) {
        this.cities = selectedProvince.city;
      } else {
        this.cities = [];
      }
      this.selectedCity = '';
      this.areas = [];
      this.selectedArea = '';
    },
    updateCityAdd() {
      // 根据选择的城市更新地区列表
      var selectedCity = this.cities.find(city => city.name === this.selectedCity);
      if (selectedCity) {
        this.areas = selectedCity.area;
      } else {
        this.areas = [];
      }
      this.selectedArea = '';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.hello{
  display: flex;
}
</style>